<template>
	<main>
		<div class="info">
			<div class="price-box">
				<span>
					￥<strong>{{product.adultprice}}</strong>
				</span>
				{{product.adultprice=='预报名'?'':'起'}}/成人
				<template v-if="product.childprice">
					<span>
						￥<strong>{{product.childprice}}</strong>
					</span>
					{{product.childprice=='预报名'?'':'起'}}/儿童
				</template>
				<label>{{product.yxbTip}}</label>
				<i class="iconfont icon-tishi" style="color: #ff7100"></i>
			</div>
			<div class="xingji" v-if="propdata.productOutdoorLevel">
				难度星级：
				<i class="xingxing" v-for="(item,index) in propdata.productOutdoorLevel.solidStar" :key="index"></i>
				<i class="xingxing xingxing-1" v-for="(item,index) in propdata.productOutdoorLevel.hollowStar" :key="index"></i>
				<i class="xingxing xingxing-2"></i>
			</div>
			<div class="title-box">
				<h1>
					<template v-if="product.brandTag">
						<i class="tags">{{product.brandTag}}</i>
					</template>
					{{product.product_name}}
				</h1>
				<label v-text="product.sub_name"></label>
				<ol>
					<li v-for="(item,index) in product.liangdian" :key="index">{{item}}</li>
				</ol>
				<hr style="background-color:#a3a3a3; height:1px; border:none;margin: 0.2rem 0;">
				<div class="dingwei">
					<label><i class="iconfont icon-dingwei" style="color: #ff7100"></i>出发地：{{product.province}}</label>
					<label>{{productCache.peopleCountLabelFull}}</label>
				</div>
			</div>
		</div>
		<div class="servers">
			<div class="server-item">
				<label>优惠</label>
				<section>
					<span v-for="(item,index) in productDiscounts.infoList" :key="index">{{item}}</span>
				</section>
				<i class="iconfont icon-jiantouyou"></i>
			</div>
			<div class="server-item">
				<label>服务</label>
				<section>
					<aside v-for="(item,index) in productServes.infoList" :key="index" style="margin-right: 0.2rem;">
						<i class="iconfont icon-ziyuan" style="color: #ff7100;position: static;"></i>
						{{item}}
						</aside>
				</section>
				<i class="iconfont icon-jiantouyou"></i>
			</div>
		</div>
		<div class="dates">
			<div class="top">
				<h1>选择日期</h1>
				<article>
					<label>我要定制</label>
					<i class="iconfont icon-jiantouyou"></i>
				</article>
			</div>
			<div class="content">
				<ul>
					<template v-for="(item,index) in dateList">
						<template v-if="item.starttime>0">
							<li :key="index">
								<p><b>{{item.day}}</b>/{{item.month}}月</p>
								<p :style="{'color':item.week=='周六'?'#FF7100':item.week=='周日'?'#FF7100':'blank'}">{{item.week}}</p>
								<p style="color:#FF7100;font-weight: bold;">￥{{item.price=='预报名'?item.price:item.price+'起'}}</p>
								<section :style="[{'color':item.fontColor},{'background':item.cornerTipColor},'font-weight: bold;']">{{item.cornerTip}}</section>
							</li>
						</template>
						<template v-else>
							<div class="dates-fenge" :key="index">
								<span>{{item.year}}</span>
								<span>年</span>
							</div>
						</template>
					</template>
				</ul>
				<div class="yibaoming">
					<template v-if="dateList.length==1">
						<label>{{productCache.peopleCountLabelFull}}</label>
						<div class="touxiang">
						<div class="touxiang-box" 
						v-for="(item,index) in dateList[0].avatarList"
						:style="[{'transform':'translateX(-'+index * 0.12+'rem)'},{'z-index':index},{'background-image':'url(https://images.weserv.nl/?url='+item+')'}]" 
						:key="index"></div>
							<i class="iconfont icon-jiantouyou" style="font-size: 0.2rem;color: #808080;"></i>
							</div>
					</template>
					<template v-else>
						<label> 这是一个好日子适合出行哦～ </label>
					</template>
				</div>
			</div>
		</div>
		<div class="pingjia" ref="pingjia">
			<template v-if="comment.pj_num>0">
				<section>
					<h1>评价<i style="font-size: 0.35rem;padding-left: 0.4rem;">({{comment.pj_num}})</i></h1>
					<span>查看更多<i class="iconfont icon-jiantouyou" style="font-size: 0.1rem;"></i></span>
				</section>
				<ul>
					<li v-for="(item,index) in comment.lineContentList" :key="index">
						<div class="centent" :style="{'width':item.img?'4rem':'8rem'}">
							<div class="top">
								<img :src="getImg(item.avatar)" >
								<label>{{item.username}}</label>
							</div>
							<span class="centent-date">{{filterDate(item.addtime)}}</span>
							<img class="youzhidianping" src="../../../assets/img/greatComment.9934f624.png" >
							<label class="txt">{{item.comment}}</label>
						</div>
						<template v-if="item.img">
							<img class="pingjia-item-img" :src="item.img?item.img:getImg(item.img)">
						</template>
					</li>
				</ul>
			</template>
			<template v-else>
				<section>
					<h1>暂无评价</h1>
				</section>
			</template>
		</div>
		<div class="zixun">
			<template v-if="discuss">
				<section>
					<h1>咨询<i style="font-size: 0.35rem;padding-left: 0.4rem;">({{discuss.num}}问)</i></h1>
					<span>查看更多<i class="iconfont icon-jiantouyou"></i></span>
				</section>
				<article>
					<p v-for="(item,index) in discuss.commentList" :key="index"><i>问</i>{{item.content}}</p>
				</article>
			</template>
			<template v-else>
				<section>
					<h1>暂无咨询</h1>
					<span>去咨询<i class="iconfont icon-jiantouyou"></i></span>
				</section>
			</template>
		</div>
		<div class="gongyingshang" ref="xiangqing">
			<section>
				<h1>供应商信息</h1>
				<span>查看供应商资质<i class="iconfont icon-jiantouyou" style="font-size: 0.1rem;"></i></span>
			</section>
			<label>{{product.companyName}}</label>
		</div>
		<div class="xingcheng">
			<h1>行程概览</h1>
			<template v-if="packges.dailyList">
				<template v-if="packges.dailyList.length>1">
					<ul>
						<li v-for="item in packges.dailyList" :key="item.id">
							<p>{{item.pkgname}}</p>
							<p>{{item.price}}</p>
						</li>
					</ul>
				</template>
			</template>
			<section>
				<p>
					<i class="icons"></i>
					<label>天数</label>：{{packges.days}}
				</p>
				<p>
					<i class="icons icons-1"></i>
					<label>出发</label>：{{packges.startPlace}}
				</p>
				<p>
					<i class="icons icons-2"></i>
					<label>集合</label>：{{packges.endPlace}}
				</p>
				<p>
					<i class="icons icons-3"></i>
					<label>解散</label>：{{packges.jiesanPlace}}
				</p>
			</section>
			<article>
				点击快速查看 活动说明、集合时间、报名咨询、出团通知
				<i class="iconfont icon-jiantouyou"></i>
			</article>
		</div>
	</main>
</template>

<script>
export default{
	name:'Info',
	props:['propdata','propdata2'],
	data(){
		return {
			product:{},
			dateList:[],
			productServes:[],
			productCache:{},
			productDiscounts:[],
			packges:{},
			discuss:{},
			comment:{}
		}
	},
	methods:{
		getImg(url){
			if(url && url !== undefined){
				let imgurl = url.substring(url.indexOf('https://')==0?8:7);
				return 'https://images.weserv.nl/?url='+imgurl;
			}
		}
	},
	watch:{
		propdata(){
			this.dateList = this.propdata.dateList;
			this.product = this.propdata.product;
			this.productServes = this.propdata.productServes;
			this.productCache = this.propdata.productCache;
			this.productDiscounts = this.propdata.productDiscounts;
			this.discuss = this.propdata.discuss;
			this.comment = this.propdata.comment;
			//修改网页标题
			document.title = this.product.product_name;
		},
		propdata2(){
			this.packges = this.propdata2;
		}
	},
	computed:{
		filterDate(){
			return (t)=>{
				let now = new Date((t*1000));
				let year = now.getFullYear();
				let month = now.getMonth() + 1;
				let date = now.getDate()
				return `${year}-${month}-${date}`;
			}
		}
	},
	updated() {
		//获取评价区域元素距离顶部的高度
		let Pingjia_T = this.$refs.pingjia.offsetTop;
		this.$emit('Pingjia_T',Pingjia_T)
		//获取详情区域元素距离顶部的高度
		let Xiangqing_T = this.$refs.xiangqing.offsetTop;
		this.$emit('Xiangqing_T',Xiangqing_T)
	}
}
</script>

<style scoped>
main{
	background-color: #efefef;
	padding-bottom: 0.2rem;
}
.info{
	padding: 0.25rem 0.3rem;
	background-color: white;
	margin: 0 auto;
}
.info .price-box{
	color: #8b8b8b;
}
.info .price-box span{
	color: #ff7100;
}
.info .price-box span strong{
	font-size: 0.5rem;
	font-weight: bold;
}
.info .price-box label{
	color: #ff7100;
	margin-right: 0.1rem;
	border-radius: 0.1rem;
	background-color: #fff1e5;
	padding: 0.05rem 0.1rem;
}
.info .xingji{
	color: #8b8b8b;
	display: flex;
	margin: 0.3rem 0 0 0.1rem;
	align-items: center;
}
.info .xingji .xingxing{
	display: inline-block;
	width: 0.25rem;
	height: 0.25rem;
	margin: 0 0.02rem;
	background-image:url(../../../assets/img/img14.3c13967f.png);
	background-size: cover;
	background-repeat: no-repeat;
}
.info .xingji .xingxing-1{
	background-image:url(../../../assets/img/img13.cff2a53b.png);
}
.info .xingji .xingxing-2{
	margin-left: 0.1rem;
	background-image:url(../../../assets/img/img12.1cf1ea2a.png);
}
.info .title-box{
	width: 98%;
	margin: 0 auto;
	margin-top: 0.2rem;
}
.info .title-box h1 .tags{
	display: inline;
	background-color: #ffcf08;
	padding: 0.05rem 0.1rem;
	font-size: 0.2rem;
	border-radius: 0.1rem;
}
.info .title-box h1{
	font-size: 0.4rem;
	line-height: 0.5rem;
	font-weight: bold;
	margin-bottom: 0.2rem;
}
.info .title-box label{
	color: #737373;
}
.info .title-box ol{
	color: #737373;
	margin-top: 0.2rem;
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow-x: auto;
	display: -webkit-box;
	-webkit-overflow-scrolling: touch;
}
/* 隐藏滚动条 */
.info .title-box ol::-webkit-scrollbar {
  display: none;
}
.info .title-box ol li{
	margin: 0 0.1rem;
	padding: 0.05rem 0.1rem;
	border: 1px dashed #ff7100;
}
.info .title-box .dingwei{
	display: flex;
	line-height: 0.5rem;
	justify-content: space-between;
}
.info .title-box .dingwei label{
	display: flex;
	align-items: center;
}

.servers{
	padding: 0 0.3rem;
	margin-top: 0.4rem;
	background-color: white;
}
.servers .server-item{
	position: relative;
	line-height: 1rem;
	display: flex;
}
.servers .server-item section{
	width: 78%;
	white-space: nowrap;
	overflow-x: auto;
	display: -webkit-box;
	-webkit-overflow-scrolling: touch;
}
/* 隐藏滚动条 */
.servers .server-item section::-webkit-scrollbar {
  display: none;
}
.servers .server-item label{
	font-size: 0.35rem;
	color: #7f7f7f;
	display: inline-block;
	width: 1.5rem;
}
.servers .server-item span{
	border: 1px solid #ff7100;
	margin: 0 0.1rem;
	color: #ff7100;
	border-radius: 0.1rem;
	padding: 0.05rem 0.1rem;
}
.servers .server-item i{
	position: absolute;
	color: #7F7F7F;
	line-height: 1rem;
	font-size: 0.2rem;
	right: 0.1rem;
}
.servers .server-item article{
	margin: 0 0.2rem;
}

.dates{
	padding: 0 0.3rem;
	margin-top: 0.2rem;
	background-color: white;
}
.dates .top{
	padding: 0.3rem 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dates .top article{
	padding: 0.1rem 0.15rem;
	border-radius: 0.3rem;
	background-color: #ebebeb;
}
.dates .top label::before{
	content: "";
	display: inline-block;
	margin-right: 0.04rem;
	width: 0.35rem;
	height: 0.35rem;
	background: url(../../../assets/img/package_img2.6db9b8c0.png) center 0.05rem no-repeat;
	background-size: 0.35rem 0.35rem;
}
.dates .top article i{
	color: #535353;
	font-size: 0.2rem;
}
.dates .top h1{
	font-size: 0.4rem;
	font-weight: bold;
}
.dates .content{
	width: 100%;
	display: flex;
	flex-direction: column;
}
.dates .content .dates-fenge{
	display: flex;
	font-size: 0.35rem;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #8a8a8a;
}
.dates .content .dates-fenge::before{
	content: "";
	display: block;
	margin-bottom: 0.07rem;
	width: 1px;
	height: 0.33rem;
	background: url(../../../assets/img/package_img5.93837a38.png) center center no-repeat;
	background-size: 100% 100%;
}
.dates .content .dates-fenge::after{
	content: "";
	display: block;
	margin-bottom: 0.07rem;
	width: 1px;
	height: 0.33rem;
	background: url(../../../assets/img/package_img6.a2cabbf4.png) center center no-repeat;
	background-size: 100% 100%;
}
.dates .content ul{
	overflow-x: auto;
	display: -webkit-box;
	-webkit-overflow-scrolling: touch;
}
.dates .content ul::-webkit-scrollbar {
  display: none;
}
.dates .content ul li{
	float: left;
	margin:0 0.2rem;
	width: 2.2rem;
	height: 2.5rem;
	text-align: center;
	padding-top: 0.15rem;
	background-image: url(../../../assets/img/package_img7.b6ceaf5e.png);
	background-size: 100% 100%;
}
.dates .content ul li b{
	font-weight: bold;
	font-size: 0.32rem;
}
.dates .content ul li p{
	margin: 0.22rem 0;
	padding: 0 0.2rem;
}
.dates .content ul li p:first-child{
	text-align: left;
}
.dates .content ul li section{
	width: 91%;
	margin: 0 auto;
	text-align: center;
	color: #ff714a;
	height: 0.45rem;
	line-height: 0.45rem;
	background-color: #fff1e5
}
.dates .content .yibaoming{
	margin-top: 0.4rem;
	height: 1rem;
	display: flex;
	padding: 0 0.3rem;
	margin-bottom: 0.3rem;
	align-items: center;
	justify-content: space-between;
	border-radius: 1rem;
	background-color: #f5f5f5;
}
.dates .content .yibaoming .touxiang .touxiang-box{
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	border: 0.03rem solid white;
	background-image: url(../../../assets/img/nav1-1.png);
	background-size: 100% 100%;
}
.dates .content .yibaoming .touxiang{
	display: flex;
	align-items: center;
}
.pingjia,
.zixun,
.gongyingshang,
.xingcheng h1{
	padding: 0.3rem 0.3rem;
	margin-top: 0.2rem;
	background-color: white;
	font-size: 0.4rem;
	font-weight: bold;
}
.zixun section,
.pingjia section,
.gongyingshang section{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.zixun span,
.pingjia span,
.gongyingshang section span{
	font-size: 0.25rem;
	color: #ff7100;
}
.pingjia ul{
	width: 100%;
	padding: 0.3rem 0;
	overflow-x: auto;
	display: -webkit-box;
	-webkit-overflow-scrolling: touch;
}
.pingjia ul::-webkit-scrollbar {
  display: none;
}
.pingjia ul li{
	width: 8rem;
	height: 3.4rem;
	margin-right: 0.3rem;
	background-color: #ffffff;
	border: 1px solid #dfdfdf;
	overflow: hidden;
	display: flex;
	border-radius: 0.3rem;
	justify-content: space-between;
}
.pingjia ul li .centent{
	position: relative;
	width: 4rem;
	padding: 0.2rem 0.2rem;
}
.pingjia ul li .centent .youzhidianping{
	position: absolute;
	width: 1.1rem;
	height: 1.1rem;
	right: 0.3rem;
	top: 0.6rem;
}
.pingjia ul li .centent .txt{
	font-size: 0.34rem;
	font-weight: 500;
	line-height: 0.45rem;
	overflow: hidden;
	color: #616161;
	display: -webkit-box;/* 转换为盒子 */
	-webkit-line-clamp: 4;/* 跟高度有关 */
	-webkit-box-orient: vertical;/* 超出盒子外的文本用省略号代替 */
}
.pingjia ul li .centent .top label{
	padding-left: 0.2rem;
	font-weight: 500;
	font-size: 0.35rem;
}
.pingjia ul li .centent .centent-date{
	font-size: 0.2rem;
	color: #909090;
	display: block;
	padding: 0.1rem 0 0.2rem 0;
	font-weight: 500;
}
.pingjia ul li .centent .top{
	display: flex;
	align-items: center;
	width: 4rem;
	padding: 0 0.1rem;
}
.pingjia ul li .centent .dates{
	font-size: 0.15rem;
}
.pingjia ul li .centent .top img{
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
}
.pingjia ul li .pingjia-item-img{
	height: auto;
	width: 4rem;
	display: inline-block;
}
.zixun article{
	margin-top: 0.3rem;
	font-size: 0.35rem;
	font-weight: 500;
}
.zixun article p{
	line-height: 0.6rem;
}
.zixun article p i{
	display: inline;
	color: #ff9b4a;
	padding: 0.02rem;
	margin-right: 0.3rem;
	background-color: #ffefe2;
}
.zixun span i{
	font-size: 0.2rem;
}
.gongyingshang label{
	display: block;
	font-weight: 500;
	font-size: 0.35rem;
	margin-top: 0.2rem;
	line-height: 0.8rem;
}
.xingcheng{
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-top: 0.2rem;
	overflow: hidden;
	background-color: white;
	padding-bottom: 0.35rem;
}
.xingcheng ul{
	width: 100%;
	overflow-x: auto;
	display: -webkit-box;
	-webkit-overflow-scrolling: touch;
}
.xingcheng ul::-webkit-scrollbar {
  display: none;
}
.xingcheng ul li{
	width: 5rem;
	float: left;
	font-weight: 500;
	white-space: nowrap;
	margin: 0 0.15rem;
	padding: 0.1rem 0;
	text-align: center;
	background-color: #f5f5f5;
}
.xingcheng ul li:first-child{
	background-color: #fdd600;
}
.xingcheng ul li p{
	line-height: 0.6rem;
}
.xingcheng section {
	padding: 0 0.3rem 0.1rem;
	font-size: 0.3rem;
}
.xingcheng section .icons{
	background-image: url(../../../assets/img/placeStart.640ac510.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 0.4rem;
	height: 0.4rem;
	display: inline-block;
	margin-right: 0.14rem;
}
.xingcheng section .icons-1{
	background-image: url(../../../assets/img/placeStart.640ac510.png);
}
.xingcheng section .icons-2{
	background-image: url(../../../assets/img/arrivePic.b512aad7.png);
}
.xingcheng section .icons-3{
	background-image: url(../../../assets/img/dismiss.e86f3d65.png);
}
.xingcheng section p{
	margin: 0.5rem 0;
	display: flex;
	align-items: center;
}
.xingcheng section p label{
	color: #535353;
}
.xingcheng article{
	width: 90%;
	text-align: center;
	font-size: 0.3rem;
	margin: 0 auto;
	padding: 0.3rem 0;
	border: 1px solid #ffd800;
	background-color: #fffbe5;
}
.xingcheng article i{
	font-size: 0.2rem;
	color: #d3b000;
}
</style>
